<template>
    <div>
        <el-row class="seach">     
            <el-select v-model="type" placeholder="请选择课程" @change="serachType">
                <el-option v-for="item in $store.state.classType.classtype " :key="item.id" :label="item.type" :value="item.type"></el-option>
                <el-option label="所有学科" value=""></el-option>
            </el-select>
            <el-input aria-placeholder="搜索课程名" v-model="name"></el-input>
            
        </el-row>
        <el-table
        v-if="!searchList.length && name==''"
        :data="$store.state.classes.classList"
        @row-dblclick="clickRow"
        style="width: 100%">
         <el-table-column
            label="课程封面"
            width="180">
            <template slot-scope="scope">
                <div>
                        <img width="40" :src="scope.row.cover_img" alt="">
                </div>
            </template>
        </el-table-column>
        <el-table-column
            prop="name"
            label="课程名字"
            width="180">
        </el-table-column>
         <el-table-column
         
            label="课程价格"
            width="180">
            <template slot-scope="scope">
                <div>
                    <el-input v-model="scope.row.price"></el-input>
                </div>
            </template>
        </el-table-column>
        <el-table-column
            prop="teacher"
            label="课程讲师"
            width="180">
        </el-table-column>
        <el-table-column
            prop="type"
            label="学科"
            width="180">
        </el-table-column>

        <el-table-column
            label="操作">
            <template slot-scope="scope">
                <div>
                    <el-button size="mini">查看</el-button> 
                    <el-button size="mini">修改</el-button>
                    <el-button size="mini" @click="dela(scope.row.id)">下架</el-button>
                </div>
            </template>
        </el-table-column>
        </el-table>

         <el-table
         v-else
        :data="searchList"
        @row-dblclick="clickRow"
        style="width: 100%">
         <el-table-column
            label="课程封面"
            width="180">
            <template slot-scope="scope">
                <div>
                        <img width="40" :src="scope.row.cover_img" alt="">
                </div>
            </template>
        </el-table-column>
        <el-table-column
            prop="name"
            label="课程名字"
            width="180">
        </el-table-column>
         <el-table-column     
            label="课程价格"
            width="180">
            <template slot-scope="scope">
                <div>
                    <el-input v-model="scope.row.price"></el-input>
                </div>
            </template>
        </el-table-column>
        <el-table-column
            prop="teacher"
            label="课程讲师"
            width="180">
        </el-table-column>
        <el-table-column
            prop="type"
            label="学科"
            width="180">
        </el-table-column>
        <el-table-column
            label="操作">
            <template >
                <div>
                    <el-button size="mini">查看</el-button> 
                    <el-button size="mini">修改</el-button>
                    <el-button size="mini" >下架</el-button>
                </div>
            </template>
        </el-table-column>
        </el-table>
    </div>
</template>

<script>
    import {searchByName,searchByType,del} from "@/api/class"
    export default {
        data(){
            return {
                type:"",
                name:"",
                searchList:[]
            }
        },
        watch:{
          name(){
              searchByName(this.type,this.name).then(res=>{ 
                    this.searchList=res.data
                })
              this.searchList =  this.name=="" ? [] :this.searchList
          }
        },
        mounted() {
         
          this.$store.dispatch("getClass").then(res=>{
                console.log(res)
                console.log(this.$store.state.classes.classList,"classList")
            })   
        },
        methods:{
            clickRow(row){
                alert(row.name)
            },
           serachType(){
               searchByType(this.type).then(res=>{
                   this.searchList=res.data
               })
           },
          async dela(id){
                 let res = await del(id)
                //  console.log(res,"del")
                //   this.del(id)
           }
        }
    }
</script>

<style scoped>
    .seach{
        display: flex;
        padding:10px 30px;
    }
    .el-table__row{
        width: 100%;
    }
</style>